<template>
  <div class="search-form">
    <div v-if="label" class="label">{{label}}</div>
    <div class="form">
      <CustomInput
        v-if="type === 'text'"
        :value="value"
        :placeholder="placeholder"
        @input="inputChange"
        @on-enter="inputEnter" />
      <CustomRadioGroup
        v-if="type === 'radioGroup'"
        :type="formType"
        :value="value"
        :radioList="radioList"
        @input="radioGroupChange" />
      <CustomSelect
        v-if="type === 'select'"
        :value="value"
        :placeholder="placeholder"
        :optionList="optionList"
        :labelKey="labelKey"
        :valKey="valKey"
        :clearable="clearable"
        :filterable="filterable"
        :isCustomOption="isCustomOption"
        @input="selectChange">
        <slot name="select" />
      </CustomSelect>
      <CustomDatePicker
        v-if="type === 'date'"
        :value="value"
        :type="formType"
        :placeholder="placeholder"
        :transfer="transfer"
        :placement="placement"
        :clearable="clearable"
        @input="dateChange"></CustomDatePicker>
      <CustomCascader
        v-if="type === 'cascader'"
        :value="value"
        :data="cascaderList"
        :placeholder="placeholder"
        :transfer="transfer"
        :clearable="clearable"
        :filterable="filterable"
        @input="cascaderChange"></CustomCascader>
    </div>
  </div>
</template>

<script>
// import CustomInput from 'base/CustomInput/CustomInput'
// import CustomRadioGroup from 'base/CustomRadioGroup/CustomRadioGroup'
// import CustomSelect from 'base/CustomSelect/CustomSelect'
// import CustomDatePicker from 'base/CustomDatePicker/CustomDatePicker'
// import CustomCascader from 'base/CustomCascader/CustomCascader'

export default {
  emits: ['input', 'on-change', 'on-enter'],
  props: {
    value: {},
    label: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    formType: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    transfer: {
      type: Boolean,
      default: true
    },
    placement: {
      type: String,
      default: 'bottom-start'
    },
    clearable: {
      type: Boolean,
      default: true
    },
    filterable: {
      type: Boolean,
      default: false
    },
    optionList: {
      type: Array,
      default: () => []
    },
    isCustomOption: {
      type: Boolean,
      default: false
    },
    valKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    radioList: {
      type: Array,
      default: () => []
    },
    cascaderList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    // CustomInput,
    // CustomRadioGroup,
    // CustomSelect,
    // CustomDatePicker
    // CustomCascader
  },
  methods: {
    inputChange (val) {
      this.$emit('input', val)
    },
    inputEnter () {
      this.$emit('on-enter')
    },
    radioGroupChange (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    },
    selectChange (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    },
    dateChange (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    },
    cascaderChange (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import 'common/scss/color';

  .search-form {
    width: 100%;
    height: 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    > .label {
      margin-right: 10px;
      color: $Color-text;
    }
    > .form {
      flex: 1;
    }
  }
</style>
